<template>
  <div class="page">
    <el-form :inline="true" v-if="searchVisible" class="query-form m-b-10" ref="searchForm" :model="searchForm" @keyup.enter="refreshList()" @submit.prevent>
      <!-- 搜索框-->
      <el-form-item prop="projectName" label="项目名称：">
        <el-input v-model="searchForm.projectName" placeholder="请输入项目名称" clearable></el-input>
      </el-form-item>
      <el-form-item prop="projectType" label="项目类型：">
        <el-select v-model="searchForm.projectType" placeholder="请选择项目类型">
          <el-option v-for="item in $dictUtils.getDictList('project_type')" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="office.id" label="负责部门：">
        <office-select v-model="searchForm.office.id" type="2" />
      </el-form-item>
       <el-form-item prop="office.id" label="年份：">
         <el-date-picker
                v-model="searchForm.year"
                type="year"
                placeholder="请选择年份"
                format="YYYY"
                style="width:100%"     />
      </el-form-item>
      <el-form-item prop="groupInternalExternal" label="集团内/外：">
        <el-select v-model="searchForm.groupInternalExternal" placeholder="请选择集团内/外">
          <el-option v-for="item in $dictUtils.getDictList('group_internal_external')" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="refreshList()" icon="search">查询</el-button>
        <el-button type="default" @click="resetSearch()" icon="refresh-right">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="jp-table">
      <vxe-toolbar ref="projectMainToolbar" :refresh="{query: refreshList}" import export print custom>
        <template #buttons>
          <el-button v-if="hasPermission('project:projectMain:add')" type="primary" icon="plus" @click="add()">新建</el-button>
          <el-button v-if="hasPermission('project:projectMain:edit')" type="warning" icon="edit-filled" @click="edit()"
            v-show="$refs.projectMainTable && $refs.projectMainTable.getCheckboxRecords().length === 1" plain>修改</el-button>
          <el-button v-if="hasPermission('project:projectMain:del')" type="danger" icon="del-filled" @click="del()"
            v-show="$refs.projectMainTable && $refs.projectMainTable.getCheckboxRecords().length > 0" plain>删除</el-button>
        </template>
        <template #tools>
          <vxe-button type="text" :title="
		    searchVisible ? '收起检索' : '展开检索'
		  " icon="vxe-icon-search" class="tool-btn" @click="searchVisible = !searchVisible"></vxe-button>
          <vxe-button type="text" title="下载导入模板" v-if="hasPermission('project:projectMain:import')" icon="vxe-button--icon vxe-icon-file-excel"
            class="tool-btn m-l-0" @click="downloadTpl()">
          </vxe-button>
        </template>
      </vxe-toolbar>
      <div class="jp-table-body">
        <vxe-table border auto-resize resizable height="auto" :loading="loading" size="small" ref="projectMainTable" show-header-overflow 
          highlight-hover-row :menu-config="{}" :print-config="{}" :import-config="{    importMethod: importMethod,    types: ['csv', 'xls', 'xlsx'],    remote: true,  }" :export-config="{    remote: true,    filename: `项目数据${moment(new Date()).format(	'YYYY-MM-DD'    )}`,
    sheetName: '项目数据',
    exportMethod: exportMethod,
    types: ['xlsx'],
    modes: ['current', 'selected', 'all'],
  }" @sort-change="sortChangeHandle" :sort-config="{remote:true}" :data="dataList" :checkbox-config="{}" @cell-click="handleCellClick">
          <vxe-column type="seq" width="40"></vxe-column>
          <vxe-column type="checkbox" width="40px"></vxe-column>    
          <vxe-column field="projectName" sortable title="项目名称" width="410"> 
          </vxe-column>

          <!-- <vxe-column field="projectSource" sortable title="项目来源" width="140">
            <template #default="{ row }">
              {{ $dictUtils.getDictLabel("project_source", row.projectSource, '-') }}
            </template>
          </vxe-column> -->
          <vxe-column field="correspondent.companyName" sortable title="业主单位" width="400">
            <template #default="{ row }">
              {{row.correspondent && row.correspondent.companyName}}
            </template>
          </vxe-column>
          <vxe-column field="year" sortable title="年份" align="right"  width="140">
          </vxe-column>
          <vxe-column field="projectType" sortable title="项目类型" width="160" >
            <template #default="{ row }">
              {{ $dictUtils.getDictLabel("project_type", row.projectType, '-') }}
            </template>
          </vxe-column>

          <vxe-column field="groupInternalExternal" sortable title="集团内/外"  width="140">
            <template #default="{ row }">
              {{ $dictUtils.getDictLabel("group_internal_external", row.groupInternalExternal, '-') }}
            </template>
          </vxe-column>
          <vxe-column field="contractSignTime" sortable title="合同签订时间" width="180" >
          </vxe-column>
          <vxe-column field="contractAmount" sortable title="合同金额(元)" align="right"  width="140">
          </vxe-column>
          <vxe-column field="office.name" sortable title="管理部门" width="400">
            <template #default="{ row }">
              {{row.office && row.office.name}}
            </template>
          </vxe-column>
          <vxe-column field="projectStatus" sortable title="项目状态"  width="140">
            <template #default="{ row }">
              <el-tag :type="row.projectStatus==1?'primary':row.projectStatus==2?'danger':row.projectStatus==1?'warning':'success'">{{ $dictUtils.getDictLabel("project_status", row.projectStatus, '-') }}</el-tag>
              
            </template>
          </vxe-column>
          <vxe-column fixed="right" align="center" width="250" title="操作">
            <template #default="{ row }">
              <el-button v-if="hasPermission('project:projectMain:view')" type="primary" text icon="view-filled" @click.stop="view(row.id,row.basisType)">查看</el-button>
              <el-button v-if="hasPermission('project:projectMain:edit')" type="primary" text icon="edit-filled" @click.stop="edit(row.id)">修改</el-button>
              <el-button v-if="hasPermission('project:projectMain:del')" type="danger" text icon="del-filled" @click.stop="del(row.id)">删除</el-button>
            </template>
          </vxe-column>
        </vxe-table>
        <vxe-pager background size="small" :current-page="tablePage.currentPage" :page-size="tablePage.pageSize" :total="tablePage.total"
          :page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]" :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
          @page-change="currentChangeHandle">
        </vxe-pager>
      </div>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <ProjectMainForm ref="projectMainForm" @refreshDataList="refreshList"></ProjectMainForm>
  </div>
</template>

<script>
import ProjectMainForm from './ProjectMainForm'
import projectMainService from '@/api/project/projectMainService'
import OfficeSelect from '@/components/officeSelect'
import moment from 'moment'
export default {
  data() {
    return {
      searchVisible: true,
      searchForm: {
        projectNo: '',
        projectName: '',
        projectType: '',
        groupInternalExternal: '',
        office: {
          id: ''
        }
      },
      dataList: [],
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        orders: [{ column: "a.create_time", asc: false }],
      },
      loading: false,
      projectId: '',
      basisType:''
    }
  },

  components: {
    OfficeSelect,
    ProjectMainForm
  },
  created() {
  },
  mounted() {
    this.$nextTick(() => {
      // 将表格和工具栏进行关联
      const $table = this.$refs.projectMainTable
      const $toolbar = this.$refs.projectMainToolbar
      $table.connect($toolbar)
    })
  },
  activated() {
    this.refreshList()
  },
  methods: {
    // 获取数据列表
    refreshList() {
      this.loading = true;
      if(this.searchForm.year){
        this.searchForm.year=moment(this.searchForm.year).format('YYYY')
      }
      projectMainService.list({
        'current': this.tablePage.currentPage,
        'size': this.tablePage.pageSize,
        'orders': this.tablePage.orders,
        ...this.searchForm
      }).then((data) => {
        this.dataList = data.records
        this.tablePage.total = data.total
        this.loading = false
      })
    },
    // 当前页
    currentChangeHandle({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.refreshList()
    },
    // 排序
    sortChangeHandle(obj) {
      this.tablePage.orders = [];
      if (obj.order != null) {
        this.tablePage.orders = [{ column: obj.column.sortBy || this.$utils.toLine(obj.property), asc: obj.order === "asc" }];
      } else {
        this.tablePage.orders = [{ column: "a.create_time", asc: false }];
      }
      this.refreshList();
    },
    // 新增
    add() {
      this.$refs.projectMainForm.init('add', '')
    },
    // 修改
    edit(id) {
      id = id || this.$refs.projectMainTable.getCheckboxRecords().map(item => {
        return item.id
      })[0]
      this.$refs.projectMainForm.init('edit', id)
    },
    // 查看
    view(id, basisType) {
      try {
        this.projectId = id;
        this.basisType = basisType;
        this.$router.push({
          path: "/projectDetails/projectDetails",
          query: {
            id: id,
            basisType: basisType
          }
        });
      } catch (error) {
        console.error('导航失败:', error);
        this.$message.error('页面跳转失败，请重试');
      }
    },
    // 删除
    del(id) {
      let ids = id || this.$refs.projectMainTable.getCheckboxRecords().map(item => {
        return item.id
      }).join(',')
      this.$confirm(`确定删除所选项吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        projectMainService.delete(ids).then((data) => {
          this.$message.success(data)
          this.refreshList()
          this.loading = false
        })
      })
    },
    // 下载模板
    downloadTpl() {
      this.loading = true
      projectMainService
        .exportTemplate()
        .then((data) => {
          // 将二进制流文件写入excel表，以下为重要步骤
          this.$utils.downloadExcel(data, "项目导入模板");
          this.loading = false
        })
        .catch(function (err) {
          this.loading = false
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    // 自定义服务端导入
    importMethod({ file }) {
      // 处理表单
      const formBody = new FormData();
      formBody.append("file", file);
      this.loading = true
      projectMainService.importExcel(formBody).then((result) => {
        this.$message.success({
          dangerouslyUseHTMLString: true,
          message: result,
        });
        this.refreshList();
      });
    },
    // 自定义服务端导出
    exportMethod({ options }) {
      // 传给服务端的参数
      const params = {
        current: this.tablePage.currentPage,
        size: this.tablePage.pageSize,
        orders: this.tablePage.orders,
        ...this.searchForm,
        filename: options.filename,
        sheetName: options.sheetName,
        isHeader: options.isHeader,
        original: options.original,
        mode: options.mode,
        selectIds:
          options.mode === "selected"
            ? options.data.map((item) => item.id)
            : [],
        exportFields: options.columns.map(
          (column) => column.property && column.property.split(".")[0]
        ),
      };
      this.loading = true;
      return projectMainService
        .exportExcel(params)
        .then((data) => {
          // 将二进制流文件写入excel表，以下为重要步骤
          this.$utils.downloadExcel(data, options.filename);
          this.loading = false;
        })
        .catch(function (err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    resetSearch() {
      this.$refs.searchForm.resetFields()
      this.refreshList()
    },
    // 添加单元格点击处理方法
    handleCellClick({ row }) {
      // 如果有权限，则执行查看操作
      if (this.hasPermission('project:projectMain:view')) {
        this.view(row.id, row.basisType);
      }
    }
  }
}
</script>

<style scoped>
/* 可以添加鼠标悬停样式 */
:deep(.vxe-table--body tr) {
  cursor: pointer;
}
</style>

